<template>
  <div class="user">
    <el-card class="box-card" shadow="always">
      <div slot="header">
        <el-form :inline="true" :model="form">
          <el-form-item label="用户名称">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="用户邮箱">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-select placeholder="请选择" v-model="form.role_id">
              <el-option label="超级管理员" value="1"></el-option>
              <el-option label="管理员" value="2"></el-option>
              <el-option label="老师" value="3"></el-option>
              <el-option label="学生" value="4"></el-option>· ·
            </el-select>
          </el-form-item>

          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="clearClick">清除</el-button>
          <el-button type="primary" @click="addEvent">+新增用户</el-button>
        </el-form>
      </div>
      <!-- 表格 -->
      <template>
        <el-table :data="list" style="width: 100%">
          <el-table-column fixed label="序号" type="index">
            <template slot-scope="{ $index }">
              <div>{{(form.page -1) * form.limit + $index +1 }}</div>
            </template>
             </el-table-column>
          <el-table-column prop="username" label="用户名"></el-table-column>
          <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="role" label="角色"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="{ row }">
              <span v-if="row.status === 1">启用</span>
              <span v-if="row.status === 0">禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="edit(row)">编辑</el-button>
              <el-button type="text" @click="ban(row)">{{
                row.status === 1 ? '禁用' : '启用'
              }}</el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page="form.page"
          :page-sizes="[1,2, 5, 10, 20]"
          :page-size="form.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增弹框组件 -->
    <Panel ref="panel" :type="type" />
  </div>
</template>

<script>
import { userList, userRemove, usertatus } from '@/api/user.js'
import Panel from './components/panel.vue'
export default {
  components: {
    Panel
  },

  data () {
    return {
      isShow: false,
      form: {
        username: '',
        email: '',
        role_id: '',
        page: 1,
        limit: 5
      },
      list: [{}],
      total: 0,
      type: 'add',
      roleMap: ['超级管理员', '管理员', '老师', '学生'],

    }

  },
  created () {
    this.getData()
  },
  methods: {
    // 获取数据
    async getData () {
      const res = await userList(this.form)
      this.list = res.data.items
      this.total = res.data.pagination.total
    },
    sizeChange (size) {
      this.form.limit = size
      this.form.page = 1
      this.getData()
    },
    pageChange (page) {
      this.form.page = page
      this.getData()
    },
    // 点击清除
    clearClick () {
      this.form.username= ''
      this.form.email= ''
      this.form.role_id= ''
      
      this.getData()
    },
    // 新增用户
    addEvent () {
      this.type = 'add'
      this.$refs.panel.isShow = true
    },
    // 删除用户
    del (id) {
      this.$confirm('您确定删除该用户吗', '提示').then(async () => {
        await userRemove(id)
        this.$message.success('删除成功')
        if(this.list.length===1){
          this.form.page=this.form.page-1
        }
        this.getData()

      })
    },
    // 禁用点击
    async ban (row) {
      await usertatus(row.id)
      this.$message.success('设置状态成功')
      this.getData()
    },
    edit (row) {
      this.type = 'edit'
      this.$refs.panel.isShow = true
      this.$refs.panel.initForm(row)
    },
    search () {
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
.user {
  background-color: #cccccc;
  .box-card {
    margin-top: 15px;
    margin-left: 15px;
    .page {
      padding-top: 15px;
      text-align: center;
    }
  }
}
</style>
